import React, { Component } from 'react';

class Formtwo extends Component {
    //状态  数据
    state = {
        username:"",
        pwd:"",
        email:''
    }

    //  非受控组件  :   获取的表单数据 不被state管理
    //  受控组件    :   获取的表单数据 被 state 管理

    //创建获取  username 方法
    // getusername=(e)=>{
    //     this.setState({
    //         username:e.target.value
    //     })
    // }

    //创建获取 pwd  方法
    // getpwd=(e)=>{
    //     this.setState({
    //         pwd:e.target.value
    //     })
    // }

    //获取表单数据
    getform=(type)=>{
        return (e)=>{
            this.setState({
                [type]:e.target.value
            })
        }
    }

    //  创建登录 方法
    login = ()=>{
        alert(`账号是：${this.state.username},密码是：${this.state.pwd}`);
    }

    //  清空数据方法
    clear=()=>{
        this.setState({
            username:"",
            pwd:"",
            email:''
        })
    }

    render() {
        return (
            <>
                <h2>受控组件</h2>
                <input value={this.state.username} onChange={this.getform('username')} type="text" placeholder='账号' /><br/><br/>

                <input value={this.state.pwd} onChange={this.getform('pwd')}  type="password" placeholder='密码' /><br/><br/>

                <input value={this.state.email} onChange={this.getform("email")}  type="email" placeholder='邮箱' /><br/><br/>

                <button onClick={this.login}>登录</button>
                <button onClick={this.clear}>重置</button>
            </> 
        );
    }
}

export default Formtwo;